<template>
  <view class="data-checkbox">
    <view class="checkbox-icon">
      <!-- 未选中、未禁用 -->
      <image class="icon" :style="iconStyle" :src="parseOssUrl('/common/checkbox_off.png')" v-show="!modelValue && !disabled"
        @click.stop="onClick(true)" />
      <!-- 未选中、禁用 -->
      <image class="icon" :style="iconStyle" :src="parseOssUrl('/common/checkbox_off_disabled.png')" v-show="!modelValue && disabled" />

      <!-- 选中、未禁用 -->
      <image class="icon" :style="iconStyle" :src="parseOssUrl('/common/checkbox_on.png')" v-show="modelValue && !disabled"
        @click.stop="onClick(false)" />
      <!-- 选中、禁用 -->
      <image
        :style="iconStyle"
        class="icon"
        :src="parseOssUrl('/common/checkbox_off_disabled.png')"
        v-show="modelValue && disabled"
      />
    </view>
    <view class="checkbox-content" v-if="title" @click="onClick(!modelValue)">{{ title }}</view>
  </view>
</template>

<script>
import { parseOssUrl } from '@/utils/img'

export default {
  name: 'DataCheckbox',
  props: {
    title: String,
    modelValue: Boolean,
    iconStyle: Object,
    disabled: Boolean
  },
  emits: ['update:model-value', 'input', 'change'],
  setup (props, { emit }) {
    const onClick = (value) => {
      if (props.disabled) return

      emit('update:model-value', value)
      emit('input', value)
      emit('change', value)
    }

    return {
      parseOssUrl,
      onClick
    }
  }
}
</script>

<style lang="scss">
xui-data-checkbox {
  line-height: 0;
}

.data-checkbox {
  display: inline-flex;
  align-items: center;

  .checkbox-icon {
    font-size: 0;

    .icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .checkbox-content {
    margin-left: 16rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #333333;
  }
}
</style>
